<template>
	<base-popup
		:modelValue="isShow"
		:closable="false"
		:is-go-back="true"
		@goBack="walletStore.setWalletDepositNextPopupShow(false)"
		class="h-[800px]">
		<template #title>
			<div class="flex justify-center items-center relative w-full pt-5">
				<p>{{ title }}</p>
				<base-icon
					name="order"
					size="20"
					@click="walletStore.setPaymentHistoryShow(true)"
					class="absolute right-4 top-0 bottom-0 my-auto self-center" />
			</div>
		</template>
		<component :is="component"></component>
	</base-popup>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { t } from '@/utils'
import { WalletDepositType, WalletType } from '@/enums'
import { BaseIcon, BasePopup } from '@/components/base'
import { useWalletStore } from '@/store'
import DepositUsdt from '@/views/wallet/deposit/deposit-usdt.vue'
import DepositBank from '@/views/wallet/deposit/deposit-bank.vue'
// import { WalletAction } from '@/types'
// import WalletHeader from '@/views/wallet/components/wallet-header.vue'

defineOptions({ name: 'ViewsWalletDeposit' })

// const route = useRoute()
const walletStore = useWalletStore()
// const data = ref({
// 	currentType: 'Crypto',
// 	payPaths: ['USDT', 'TRC20'],
// 	merchantCode: '',
// 	bankCode: ''
// })

const currentType: any = computed(() => walletStore.depositData.currentType)
const component = computed(() => {
	if (currentType.value.toLowerCase() == WalletDepositType.crypto.id.toLowerCase()) {
		return DepositUsdt
	} else {
		return DepositBank
	}
})
// const isShow = ref(true)
const isShow = computed(() => walletStore.showWalletDepositNextPopup)

const title = computed(() => {
	const prefix = t('wallet.deposit') + ' - '
	let title
	if (currentType.value.toLowerCase() === WalletDepositType.crypto.id.toLowerCase()) {
		const cryptoType = walletStore.depositData.cryptoType
		const cryptoCode = walletStore.depositData.cryptoCode
		title = `${cryptoType} (${cryptoCode})`
	} else {
		title = t(WalletType.bank.name)
	}
	return prefix + title
})
</script>
